<template>
  <div>
    <div>
      <ButtonGroup>
        <Button type="primary" @click="handleAdd" icon="md-add">添加</Button>
        <Button type="primary" @click="handleEdit" icon="md-create">编辑</Button>
        <Button type="primary" @click="handleDelete" icon="md-trash">删除</Button>
      </ButtonGroup>
    </div>
    <Row>
      <Col span="8">
        <Card>
          <!--<Input placeholder="输入关键字搜索" class="search-input" v-model="filterText" />-->
          <Tree :data="treeData" ref="menuTree" @on-select-change="getNodeData" ></Tree>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <Form ref="form" :model="form" :label-width="100" :rules="rules">
            <FormItem label="编码" prop="code">
              <Input v-model="form.code" :disabled="formEdit" placeholder="请输入路径编码"></Input>
            </FormItem>
            <FormItem label="标题" prop="title">
              <Input v-model="form.title" :disabled="formEdit" placeholder="请输入标题"></Input>
            </FormItem>
            <FormItem label="父级节点ID" prop="parentId">
              <Input v-model="form.parentId" :disabled="formEdit" disabled readonly></Input>
            </FormItem>
            <FormItem label="排序" prop="orderNum">
              <Input v-model="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></Input>
            </FormItem>
            <FormItem v-if="formStatus == 'update'">
              <Button type="primary" @click="update('form')">更新</Button>
              <Button @click="onCancel">取消</Button>
            </FormItem>
            <FormItem v-if="formStatus == 'create'">
              <Button type="primary" @click="create('form')">保存</Button>
              <Button @click="onCancel">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { mapGetters } from 'vuex'
import {
  fetchTree,
  page,
  addObj,
  getObj,
  delObj,
  putObj
} from '@/api/sys/menu'
import { convertTree } from '@/libs/util'
export default {
  name: 'sysMenu',
  components: {
    Tables
  },
  data () {
    return {
      filterText: '',
      formEdit: true,
      formStatus: '',
      form: {
        code: undefined,
        title: undefined,
        id: undefined,
        parentId: undefined,
        orderNum: undefined
      },
      currentId: '0',
      rules: {
        code: [
          {
            required: true,
            message: '请输入编码',
            trigger: 'blur'
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        orderNum: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      dialogStatus: '',
      treeData: [],
      listQuery: {
        page: 1,
        limit: 10,
        name: undefined,
        username: undefined
      },
      listLoading: false,
      total: 0,
      current: 1,
      dialogFormVisible: false
    }
  },
  watch: {
    filterText (val) {
      this.getList();
    }
  },
  created () {
    this.getList();
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    resetTemp () {
      this.form = {
        username: undefined,
        name: undefined,
        password: undefined
      }
    },
    handleUpdate (props) {
      getObj(props.row.id)
        .then(response => {
          this.form = response.data;
          this.dialogFormVisible = true;
          this.dialogStatus = 'update';
        })
    },
    getList (params) {
      this.listLoading = true;
      fetchTree({title: this.filterText}).then(data => {
        const map = {
          value: 'id',
          label: 'label',
          children: 'children'
        }
        this.treeData = convertTree(data, map)
      })
    },
    getNodeData (data, node) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(node.id).then(response => {
        this.form = response.data;
        this.currentId = this.form.id;
      });
      this.$set(node, 'expand', !node.expand)
    },
    create (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(() => {
            this.getList();
            this.$Notice.success({
              title: '成功',
              desc: '创建成功'
            })
          })
        } else {
          return false;
        }
      })
    },
    update (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          putObj(this.form).then(() => {
            this.getList();
            this.$Notice.success({
              title: '成功',
              desc: '更新成功'
            })
          })
        } else {
          return false;
        }
      })
    },
    onCancel () {
      this.formEdit = true
      this.formStatus = ''
    },
    cancel (formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    handleAdd () {
      this.resetForm();
      this.form.parentId = this.currentId;
      this.formEdit = false;
      this.formStatus = 'create';
    },
    handleEdit () {
      if (this.form.id) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handleCurrentChange (val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleSizeChange (val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleDelete (params) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除, 是否继续?',
        onOk: () => {
          delObj(this.currentId).then(() => {
            this.getList();
            this.resetForm();
            this.onCancel();
            this.$Notice.success({
              title: '成功',
              message: '删除成功'
            })
          })
        }
      })
    },
    resetForm () {
      this.form = {
        code: undefined,
        title: undefined,
        id: undefined,
        parentId: undefined,
        orderNum: undefined
      }
    }
  }
}
</script>
